<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Slider - UIkit tests</title>
        <script src="js/test.js"></script>
        <style>

            .test > :nth-child(10n-9) > canvas { background: rgba(0,0,0,0.1); }
            .test > :nth-child(10n-8) > canvas { background: rgba(0,0,0,0.15); }
            .test > :nth-child(10n-7) > canvas { background: rgba(0,0,0,0.2); }
            .test > :nth-child(10n-6) > canvas { background: rgba(0,0,0,0.25); }
            .test > :nth-child(10n-5) > canvas { background: rgba(0,0,0,0.3); }
            .test > :nth-child(10n-4) > canvas { background: rgba(0,0,0,0.35); }
            .test > :nth-child(10n-3) > canvas { background: rgba(0,0,0,0.40); }
            .test > :nth-child(10n-2) > canvas { background: rgba(0,0,0,0.45); }
            .test > :nth-child(10n-1) > canvas { background: rgba(0,0,0,0.50); }
            .test > :nth-child(10n) > canvas { background: rgba(0,0,0,0.55); }

        </style>
    </head>

    <body>

        <div class="uk-container">

            <h1>Slider</h1>

            <div class="uk-margin">
                <select id="js-center-switcher" class="uk-select uk-form-width-small" aria-label="Center switcher">
                    <option value="0">Not centered</option>
                    <option value="1">Center</option>
                </select>
                <select id="js-finite-switcher" class="uk-select uk-form-width-small" aria-label="Finite switcher">
                    <option value="0">Infinite</option>
                    <option value="1">Finite</option>
                </select>
                <select id="js-sets-switcher" class="uk-select uk-form-width-small" aria-label="Sets switcher">
                    <option value="0">Single</option>
                    <option value="1">Sets</option>
                </select>
                <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
                    <option value="">All</option>
                    <option value="first">First</option>
                </select>
            </div>

            <h2>Content Widths</h2>

            <div uk-slider>

                <div class="uk-position-relative">

                    <div class="uk-slider-container uk-light">
                        <div class="test uk-slider-items">
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>1</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>2</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>3</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>4</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>5</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>6</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>7</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>8</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>9</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>10</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>11</h1></div>
                            </div>
                            <div>
                                <canvas width="320" height="200"></canvas>
                                <div class="uk-position-center uk-panel"><h1>12</h1></div>
                            </div>
                        </div>
                    </div>

                    <div class="uk-hidden@xl uk-light">
                        <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    <div class="uk-visible@xl">
                        <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    <!-- Alternative markup

                    <div class="uk-visible@s uk-dark"  uk-toggle="cls: uk-dark uk-light; mode: media; media: @xl">
                        <a class="uk-position-center-left-out uk-position-small" uk-toggle="cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @xl" href uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right-out uk-position-small" uk-toggle="cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @xl" href uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    -->

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

            <h3>Different Widths</h3>

            <div uk-slider>

                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

                    <div class="test uk-slider-items">
                        <div>
                            <canvas width="400" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>1</h1></div>
                        </div>
                        <div>
                            <canvas width="240" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>2</h1></div>
                        </div>
                        <div>
                            <canvas width="480" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>3</h1></div>
                        </div>
                        <div>
                            <canvas width="300" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>4</h1></div>
                        </div>
                        <div>
                            <canvas width="400" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>5</h1></div>
                        </div>
                        <div>
                            <canvas width="240" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>6</h1></div>
                        </div>
                        <div>
                            <canvas width="480" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>7</h1></div>
                        </div>
                        <div>
                            <canvas width="300" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>8</h1></div>
                        </div>
                        <div>
                            <canvas width="400" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>9</h1></div>
                        </div>
                        <div>
                            <canvas width="240" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>10</h1></div>
                        </div>
                        <div>
                            <canvas width="480" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>11</h1></div>
                        </div>
                        <div>
                            <canvas width="300" height="200"></canvas>
                            <div class="uk-position-center uk-panel"><h1>12</h1></div>
                        </div>
                    </div>

                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

            <h2>Width Classes + Toggle on active</h2>

            <div uk-slider="clsActivated: uk-transition-active">

                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

                    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
                        <div>
                            <img src="images/slider1.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                        </div>
                        <div>
                            <img src="images/slider2.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                        </div>
                        <div>
                            <img src="images/slider3.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                        </div>
                        <div>
                            <img src="images/slider4.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                        </div>
                        <div>
                            <img src="images/slider5.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                        </div>
                        <div>
                            <img src="images/slider1.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                        </div>
                        <div>
                            <img src="images/slider2.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                        </div>
                        <div>
                            <img src="images/slider3.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                        </div>
                        <div>
                            <img src="images/slider4.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                        </div>
                        <div>
                            <img src="images/slider5.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                        </div>
                    </div>

                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

            <h2>Grid + Toggle on hover</h2>

            <div uk-slider>

                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

                    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider1.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider2.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider3.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider4.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider5.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider1.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider2.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider3.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider4.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                            </div>
                        </div>
                        <div>
                            <div class="uk-panel uk-transition-toggle" tabindex="0">
                                <img src="images/slider5.jpg" width="400" height="600" alt="">
                                <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                            </div>
                        </div>
                    </div>

                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

                </div>

            </div>

            <h2>Container Offset + Cards</h2>

            <div uk-slider>

                <div class="uk-position-relative uk-visible-toggle">

                    <div class="uk-slider-container uk-slider-container-offset" tabindex="-1">

                        <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
                            <div>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                            <div>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <a class="uk-position-center-left-out uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right-out uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

            <h2>Parallax Control</h2>

            <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%; clsActivated: uk-transition-active">

                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

                    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
                        <div>
                            <img src="images/slider1.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                        </div>
                        <div>
                            <img src="images/slider2.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                        </div>
                        <div>
                            <img src="images/slider3.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                        </div>
                        <div>
                            <img src="images/slider4.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                        </div>
                        <div>
                            <img src="images/slider5.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                        </div>
                        <div>
                            <img src="images/slider1.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                        </div>
                        <div>
                            <img src="images/slider2.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                        </div>
                        <div>
                            <img src="images/slider3.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                        </div>
                        <div>
                            <img src="images/slider4.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                        </div>
                        <div>
                            <img src="images/slider5.jpg" width="400" height="600" alt="">
                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                        </div>
                    </div>

                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

            <h2>Viewport Height + Parallax</h2>

        </div>

        <div class="uk-margin" uk-slider>

            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

                <div class="uk-slider-items uk-grid-large uk-grid-match uk-grid" uk-height-viewport="min-height: 200">
                    <div class="uk-width-2-3">
                        <div class="uk-cover-container">
                            <img src="images/photo.jpg" alt="" uk-cover>
                            <div class="uk-position-center uk-position-medium uk-text-center">
                                <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
                                <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-2-3">
                        <div class="uk-cover-container">
                            <img src="images/dark.jpg" alt="" uk-cover>
                            <div class="uk-position-center uk-position-medium uk-text-center">
                                <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
                                <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-2-3">
                        <div class="uk-cover-container">
                            <img src="images/light.jpg" alt="" uk-cover>
                            <div class="uk-position-center uk-position-medium uk-text-center">
                                <h1 class="uk-heading-xlarge" uk-slider-parallax="y: -100,0,0; opacity: 1,1,0">Heading</h1>
                                <p class="uk-h1" uk-slider-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-2-3">
                        <div class="uk-cover-container">
                            <img src="images/photo2.jpg" alt="" uk-cover>
                            <div class="uk-position-center uk-position-medium uk-text-center">
                                <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
                                <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-2-3">
                        <div class="uk-cover-container">
                            <img src="images/photo3.jpg" alt="" uk-cover>
                            <div class="uk-position-center uk-position-medium uk-text-center">
                                <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
                                <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <a class="uk-position-center-left uk-position-large uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
                <a class="uk-position-center-right uk-position-large uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>

            </div>

            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

        </div>

        <div class="uk-container">

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>autoplay</code></td>
                            <td>Boolean</td>
                            <td>false</td>
                            <td>Starts autoplaying the slideshow.</td>
                        </tr>
                        <tr>
                            <td><code>autoplay-interval</code></td>
                            <td>Number</td>
                            <td>7000</td>
                            <td>The delay between switching slides in autoplay mode.</td>
                        </tr>
                        <tr>
                            <td><code>center</code></td>
                            <td>Boolean</td>
                            <td>false</td>
                            <td>Center the active slide.</td>
                        </tr>
                        <tr>
                            <td><code>draggable</code></td>
                            <td>Boolean</td>
                            <td>true</td>
                            <td>Enable pointer dragging.</td>
                        </tr>
                        <tr>
                            <td><code>finite</code></td>
                            <td>Boolean</td>
                            <td>false</td>
                            <td>Disable infinite sliding.</td>
                        </tr>
                        <tr>
                            <td><code>index</code></td>
                            <td>Number</td>
                            <td>0</td>
                            <td>Slider item to show. 0 based index.</td>
                        </tr>
                        <tr>
                            <td><code>active</code></td>
                            <td>String</td>
                            <td>all</td>
                            <td>Slider item/items to apply the transition active class to (all|first).</td>
                        </tr>
                        <tr>
                            <td><code>pause-on-hover</code></td>
                            <td>Boolean</td>
                            <td>true</td>
                            <td>Pause autoplay mode on hover.</td>
                        </tr>
                        <tr>
                            <td><code>sets</code></td>
                            <td>Boolean</td>
                            <td>false</td>
                            <td>Slide in sets.</td>
                        </tr>
                        <tr>
                            <td><code>velocity</code></td>
                            <td>Number</td>
                            <td>1</td>
                            <td>The animation velocity (pixel/ms).</td>
                        </tr>
                        <tr>
                            <td><code>i18n</code></td>
                            <td>Object</td>
                            <td>null</td>
                            <td>Override default translation texts.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h2>i18n</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Key</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>next</code></td>
                            <td>Next slide</td>
                            <td><code>aria-label</code> for next slide button.</td>
                        </tr>
                        <tr>
                            <td><code>previous</code></td>
                            <td>Previous slide</td>
                            <td><code>aria-label</code> for previous slide button.</td>
                        </tr>
                        <tr>
                            <td><code>slideX</code></td>
                            <td>Slide %s</td>
                            <td><code>aria-label</code> for pagination slide button.</td>
                        </tr>
                        <tr>
                            <td><code>slideLabel</code></td>
                            <td>%s of %s</td>
                            <td><code>aria-label</code> for slide.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <script>

            const {attr, $$, on} = UIkit.util;
            for (const attribute of ['finite', 'center', 'sets', 'active']) {
                on(`#js-${attribute}-switcher`, 'change', e =>
                    attr($$('[uk-slider]'), attribute, e.target.value)
                );
            }

        </script>

    </body>
</html>
